<template>
  <div class="formTop-right2" >
    <h2 @click='searchVisible= !searchVisible'>最近使用的搜索条件<i v-if='searchVisible' class="fa fa-minus"></i><i v-else class="fa fa-plus"></i></h2>
    <el-collapse-transition>
      <div v-show = 'searchVisible'>
        <p v-for='(k,i) in searchCheckList' v-if='searchCheckList.length'>
          <el-checkbox v-model.trim='searchCheckModel[i]' @change='handleSearchCheck(i)' class='check'></el-checkbox>
          <span @click='spanClick(i)' class='name' :class='{select:searchCheckModel[i]}' :title='k.conditoinName'>{{k.conditoinName}}</span>
          <i @click.stop='deleteClick(i)' class='el-icon-circle-cross' style='color:#CECECE'></i>
        </p>
        
      </div>

    </el-collapse-transition> 
    
  </div> 
</template>

<script>
import { MessageBox, Message } from 'element-ui'
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    historyRefresh: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      searchVisible: false,
      searchCheckModel: [],
      searchCheckList: []
    }
  },
  watch: {
    historyRefresh (newValue, oldValue) {
      newValue && this.getList()
    }
  },

  mounted () {
    this.getList()
  },

  methods: {
    getList () {

      const params = {
        type: this.type
      }
      this.Axios
        .Post('/reportSearch/getReportSearchList', params)
        .then((res) => {
          this.searchCheckList = res.data.datas
          this.searchCheckModel.length = this.searchCheckList.length
        })
    },
    spanClick (i) {
      this.searchCheckModel.splice(i, 1, !this.searchCheckModel[i])
      this.handleSearchCheck(i)
    },
    deleteClick (i) {

      MessageBox.confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          id: this.searchCheckList[i].id,
          type: this.type
        }

        this.Axios
          .Post('/reportSearch/deleteReportSearchById', params)
          .then((res) => {

            if (res.data.status === 1) {
              this.searchCheckModel.splice(i, 1)
              this.searchCheckList.splice(i, 1)
              Message({
                type: 'success',
                message: res.data.message
              })
            }


          })
      }).catch(() => {

      });


    },
    handleSearchCheck (i) {
      if (this.searchCheckModel[i]) {
        this.searchCheckModel.forEach((ele, index, arr) => {
          if (index !== i) arr[index] = false
        })

        this.$emit('getHistoryData', this.getTransFormData(this.searchCheckList[i]))
      }
    },

    getTransFormData (data) {

      let result = { ...data }
      result.unionPower = !!result.unionPower
      result.whetherSubDepartment = !!result.whetherSubDepartment
      result.sex = result.sex.split(',')
      result.controlPower = result.controlPower.split(',')

      return result
    }

  },
}
</script>

<style scoped lang='less'>
.formTop-right2 {
  position: absolute;
  left: 36px;
  top: 26px;
  width: 26%;
  border: 1px solid #bfcbd9;
  z-index: 99;
  ::-webkit-scrollbar {
    width: 0px;
  }

  & > h2 {
    background-color: #20a0ff;
    color: #fff;
    text-align: center;
    // font-size: 15px;
    font-weight: normal;
    padding: 6px 0;
    cursor: pointer;
    position: relative;
    & > i {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  & > div {
    max-height: 160px;
    height: 160px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: #fff;

    p {
      padding: 8px 0 8px 12px;
      position: relative;

      .check span {
        transform: scale(0.92);
      }
      span.name.select {
        color: #38f;
      }
      span.name {
        cursor: pointer;
        position: relative;
        top: 4px;
        left: 6px;
        font-size: 13px;
        display: inline-block;
        max-width: 170px;
        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis;
      }
      i {
        position: absolute;
        right: 10px;
        margin-top: 6px;
        cursor: pointer;
        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
}
</style>